<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ImgCropper</title>
    <link rel="stylesheet" href="dist/cropper.css">
    <link href="css/demo.css"/>
    <script src="dist/jquery.min.js"></script>
    <script src="src/cropper.js"></script>
</head>
<body>
<form method="post" action="#" enctype="multipart/form-data">
    <p>
        <button class="btn-upload btn-lg">Select</button>
        <input type="file" name="avatar" id="cropper-input"/>
        Support formats: JPG, PNG
    </p>

    <div class="crop-wrap">
        <img src="" class="origin-img" alt="" style="width: 300px">
        <img src="" class="crop-img" alt="">
    </div>
    <canvas style="width: 100px;height: 100px;border: 1px solid #000;"></canvas>
</form>
<script>
    $(function () {
        var cropper = new ImgCropper();
        cropper.init();
    })
</script>
</body>
</html>